<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style>
        canvas {
            border: 1px solid #666;
        }
    </style>
</head>
<body>
<canvas id="canvas1" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600"></canvas>

<script>
  const canvas1 = document.getElementById('canvas1')
  const ctx1 = canvas1.getContext('2d')
  const ball = {
    x: 100,
    y: 100,
    vx: 3.6,
    vy: 5.5,
    radius: 25,
    color: '#fa6412',
    draw() {
      ctx1.beginPath()
      ctx1.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true)
      ctx1.closePath()
      ctx1.fillStyle = this.color
      ctx1.fill()
    }
  }

  function move() {
    const r = ball.radius / 2
    ctx1.fillStyle = 'rgba(255, 255, 255, 0.3)'
    ctx1.fillRect(0, 0, canvas1.width, canvas1.height)
    ball.draw()
    ball.x += ball.vx
    ball.y += ball.vy
    if (ball.x + ball.vx > canvas1.width - r || ball.x + ball.vx < r) {
      ball.vx = -ball.vx
    }
    if (ball.y + ball.vy > canvas1.height - r || ball.y + ball.vy < r) {
      ball.vy = -ball.vy
    }
    window.requestAnimationFrame(move)
  }

  window.requestAnimationFrame(move)
</script>
<script>
  const canvas2 = document.getElementById('canvas2')
  const ctx2 = canvas2.getContext('2d')
  ctx2.fillStyle = '#fcbfe2'
  ctx2.strokeStyle = '#ea9ed8'
  ctx2.lineWidth = 6
  // 圆脸
  ctx2.beginPath()
  ctx2.arc(300, 200, 80, -Math.PI * 0.3, Math.PI * 0.97, false)
  ctx2.fill()
  ctx2.stroke()
  ctx2.closePath()
  // 长脸
  ctx2.lineWidth = 12
  ctx2.globalCompositeOperation = 'destination-over'
  ctx2.beginPath()
  ctx2.ellipse(250, 158, 110, 50, Math.PI * 0.02, 0, Math.PI * 2)
  ctx2.fill()
  ctx2.stroke()
  ctx2.closePath()
  // 耳朵
  ctx2.beginPath()
  ctx2.ellipse(265, 110, 15, 40, Math.PI * 0.05, 0, Math.PI * 2, true)
  ctx2.ellipse(315, 120, 15, 40, Math.PI * 0.1, 0, Math.PI * 2, true)
  ctx2.fill()
  ctx2.stroke()
  ctx2.closePath()
  // 鼻子
  ctx2.lineWidth = 6
  ctx2.globalCompositeOperation = 'source-over'
  ctx2.beginPath()
  ctx2.ellipse(165, 150, 25, 30, Math.PI * 0.1, 0, Math.PI * 2, true)
  ctx2.fill()
  ctx2.stroke()
  ctx2.closePath()
  // 鼻孔
  ctx2.fillStyle = '#cb4d8e'
  ctx2.beginPath()
  ctx2.arc(155, 150, 5, 0, Math.PI * 2, false)
  ctx2.fill()
  ctx2.closePath()
  ctx2.beginPath()
  ctx2.arc(175, 150, 5, 0, Math.PI * 2, false)
  ctx2.fill()
  ctx2.closePath()
  // 眼睛
  ctx2.fillStyle = '#fff'
  ctx2.beginPath()
  ctx2.arc(225, 130, 12, 0, Math.PI * 2)
  ctx2.fill()
  ctx2.stroke()
  ctx2.closePath()
  ctx2.beginPath()
  ctx2.arc(268, 135, 12, 0, Math.PI * 2)
  ctx2.fill()
  ctx2.stroke()
  ctx2.closePath()
  // 眼珠
  ctx2.fillStyle = '#000'
  ctx2.beginPath()
  ctx2.arc(222, 130, 5, 0, Math.PI * 2)
  ctx2.fill()
  ctx2.closePath()
  ctx2.beginPath()
  ctx2.arc(265, 135, 5, 0, Math.PI * 2)
  ctx2.fill()
  ctx2.closePath()
  // 嘴
  ctx2.strokeStyle = '#cb4d8e'
  ctx2.beginPath()
  ctx2.arc(280, 215, 35, Math.PI * 0.1, Math.PI * 0.9)
  ctx2.stroke()
  ctx2.closePath()
  // 粉扑
  ctx2.fillStyle = '#ff99db'
  ctx2.beginPath()
  ctx2.ellipse(340, 180, 23, 28, Math.PI, 0, Math.PI * 2, true)
  ctx2.fill()
  ctx2.closePath()
  // 身体
  ctx2.strokeStyle = '#d74857'
  ctx2.fillStyle = '#f35d5d'
  ctx2.lineJoin = 'round'
  ctx2.lineWidth = 12
  ctx2.globalCompositeOperation = 'destination-over'
  ctx2.beginPath()
  ctx2.moveTo(240, 245)
  ctx2.lineTo(200, 400)
  ctx2.lineTo(400, 400)
  ctx2.lineTo(360, 245)
  ctx2.moveTo(240, 245)
  ctx2.quadraticCurveTo(180, 320, 200, 400)
  ctx2.moveTo(360, 245)
  ctx2.quadraticCurveTo(420, 320, 400, 400)
  ctx2.fill()
  ctx2.stroke()
  ctx2.closePath()
  // 左手
  ctx2.strokeStyle = '#fcbfe2'
  ctx2.lineWidth = 10
  ctx2.beginPath()
  ctx2.moveTo(230, 290)
  ctx2.lineTo(150, 320)
  ctx2.stroke()
  ctx2.closePath()
  ctx2.beginPath()
  ctx2.moveTo(175, 312)
  ctx2.lineTo(145, 300)
  ctx2.moveTo(175, 312)
  ctx2.lineTo(170, 330)
  ctx2.stroke()
  ctx2.closePath()
  // 右手
  ctx2.beginPath()
  ctx2.moveTo(300, 290)
  ctx2.lineTo(460, 320)
  ctx2.stroke()
  ctx2.closePath()
  ctx2.beginPath()
  ctx2.moveTo(435, 312)
  ctx2.lineTo(445, 340)
  ctx2.moveTo(435, 312)
  ctx2.lineTo(450, 300)
  ctx2.stroke()
  ctx2.closePath()
  // 腿
  ctx2.beginPath()
  ctx2.moveTo(260, 400)
  ctx2.lineTo(260, 450)
  ctx2.stroke()
  ctx2.closePath()
  ctx2.beginPath()
  ctx2.moveTo(350, 400)
  ctx2.lineTo(350, 450)
  ctx2.stroke()
  ctx2.closePath()
  // 脚
  ctx2.strokeStyle = '#000'
  ctx2.globalCompositeOperation = 'source-over'
  ctx2.lineCap = 'round'
  ctx2.lineWidth = 15
  ctx2.beginPath()
  ctx2.moveTo(260, 450)
  ctx2.lineTo(240, 450)
  ctx2.stroke()
  ctx2.closePath()
  ctx2.beginPath()
  ctx2.moveTo(350, 450)
  ctx2.lineTo(330, 450)
  ctx2.stroke()
  ctx2.closePath()
</script>
</body>
</html>
